html[lang='en'] {
  body {
    --el-font-family: helvetica, arial, arial black, 'andale mono', 'times', 'avant garde', 'book antiqua', 'palatino', 'comic sans ms', 'courier new', 'courier', 'georgia', 'palatino', 'impact', 'chicago', 'symbol', 'tahoma', 'terminal', 'monaco', 'times new roman', 'trebuchet ms', 'geneva',
      verdana, webdings, 'zapf dingbats', sans-serif;
    --el-font-family-default: 'verdana';
  }
}

html[lang='zh-CN'] {
  body {
    --el-font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', helvetica, 'Hiragino Sans GB', 'simsun', 'FangSong', 'SimHei', arial, 'arial black', 'avant garde', 'book antiqua', 'palatino', sans-serif, serif;
    --el-font-family-default: 'Microsoft YaHei';
  }
}

html.dark body {
  --el-overlay-color-rgb: var(--el-color-black-rgb);
}

html.light body {
  --el-overlay-color-rgb: var(--el-color-white-rgb);
}

body {
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  color: var(--el-text-color-primary);
  font-size: var(--el-font-size-base);
  font-family: var(--el-font-family);
  background-color: var(--el-bg-color-page);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
}

label {
  font-weight: 700;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

div:focus {
  outline: none;
}

ul,
li,
ol,
dl,
dt,
dd {
  margin: 0;
  padding: 0;
  list-style: none;
}

label {
  font-weight: normal;
}

.clearfix {
  &::before {
    display: table;
    clear: both;
    width: 100%;
    height: 0;
    visibility: hidden;
    content: '';
  }

  &::after {
    display: block;
    clear: both;
    height: 0;
    font-size: 0;
    visibility: hidden;
    content: ' ';
  }
}

#app {
  width: 100%;
  height: 100vh;

  > .exception-page {
    height: 100vh;
  }
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  min-height: 28px;
  background-color: rgba(40, 44, 52, 0.1);
  background-clip: padding-box;
  border-radius: 2em;
}

::-webkit-scrollbar-track {
  width: 8px;
  background: transparent;
  border-radius: 2em;
}

.image-slot {
  display: block;
  width: 100%;

  img {
    display: block;
    width: 100%;
  }

  .slot-content {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--el-text-color-secondary);
    font-size: 30px;
    background: var(--el-fill-color-light);

    p {
      margin: 5px 0 0;
      font-size: var(--el-font-size-base);
    }
  }
}

#nprogress {
  .bar {
    background-color: var(--el-color-primary);
  }

  .peg {
    box-shadow: 0 0 10px var(--el-color-primary), 0 0 5px var(--el-color-primary);
  }

  .spinner-icon {
    border-top-color: var(--el-color-primary);
    border-left-color: var(--el-color-primary);
  }
}

.echarts-tooltip {
  .tooltip-list {
    width: 100%;
    overflow: hidden;

    .item-tooltip {
      display: flex;

      .icon {
        width: 8px;
        height: 8px;
        margin-top: 8px;
        margin-right: 8px;
        border-radius: 50%;
      }

      .name {
        flex: 1;
        height: 24px;
        padding-right: 15px;
        color: rgba(89, 89, 89, 1);
        line-height: 24px;
      }

      .num {
        height: 24px;
        color: rgba(89, 89, 89, 1);
        font-weight: bold;
        line-height: 24px;
      }
    }
  }
}

.v-contextmenu {
  padding: 5px;
  line-height: 1.5;
  background-color: transparent;
  border: none;
  box-shadow: none;

  .v-contextmenu-inner {
    background-color: var(--el-bg-color);
    border-radius: calc(2px + var(--el-border-radius-base));
    box-shadow: var(--el-box-shadow);

    .v-contextmenu-submenu {
      &.icon-placeholder {
        > .v-contextmenu-submenu__title {
          padding-left: 34px;

          .el-icon {
            position: absolute;
            top: 50%;
            left: 10px;
            transform: translateY(-50%);
          }
        }
      }

      .v-contextmenu-submenu__title {
        padding-right: 40px;
      }

      .v-contextmenu-submenu__arrow {
        right: 15px;
      }
    }

    .v-contextmenu-item {
      position: relative;
      padding: 5px 20px;
      color: var(--el-text-color-regular);
      line-height: 22px;

      &.icon-placeholder {
        padding-left: 34px;

        .el-icon {
          position: absolute;
          top: 50%;
          left: 10px;
          transform: translateY(-50%);
        }
      }

      &.v-contextmenu-item--hover {
        color: var(--el-color-white);
        background-color: var(--el-color-primary);
      }

      &.v-contextmenu-item--disabled {
        color: var(--el-text-color-disabled);
      }
    }

    .v-contextmenu-divider {
      border-bottom: 1px solid var(--el-border-color-lighter);
    }
  }
}

@media print {
  @page {
    size: auto a4 landscape;
    margin: 3mm;
  }

  body,
  html {
    height: auto !important;
  }

  /* 最外层打印节点 */
  #img,
  #print,
  #article,
  #chart,
  #table {
    display: block;
    height: auto;
    overflow: hidden;
  }

  #print,
  #table {
    table-layout: auto !important;
  }

  #print .chart>div>div,
  #print canvas,
  #chart>div>div,
  #chart canvas {
    width: 100% !important;
  }
}

.cropper-line,
.cropper-point {
  background-color: var(--el-color-primary) !important;
}

div#driver-highlighted-element-stage,
div#driver-page-overlay {
  background: transparent !important;
  /* stylelint-disable-next-line color-function-notation */
  outline: rgba(0, 0, 0, 0.75) solid 5000px;
}

#driver-popover-item {
  .driver-popover-footer {
    .driver-prev-btn,
    .driver-next-btn,
    .driver-close-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      height: 28px;
      padding: 6px 10px;
      color: var(--el-color-white);
      font-weight: var(--el-button-font-weight);
      font-size: var(--el-font-size-base);
      line-height: 1;
      white-space: nowrap;
      text-align: center;
      text-shadow: none;
      vertical-align: middle;
      background-color: var(--el-color-primary);
      border: 1px solid var(--el-color-primary);
      border-radius: var(--el-border-radius-base);
      outline: 0;
      cursor: pointer;
      transition: 0.1s;
      appearance: none;
      user-select: none;

      &:hover {
        color: var(--el-color-white);
        background-color: var(--el-color-primary-light-3);
        background-image: none;
        border-color: var(--el-color-primary-light-3);
      }

      &:active {
        color: var(--el-color-white);
        background-color: var(--el-color-primary-dark-2);
        background-image: none;
        border-color: var(--el-color-primary-dark-2);
      }

      &.driver-disabled {
        color: var(--el-color-white);
        background-color: var(--el-color-primary-light-5);
        background-image: none;
        border-color: var(--el-color-primary-light-5);
        cursor: not-allowed;
      }
    }
  }
}

.message-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 25px 0;

  &.danger {
    .icon-svg {
      color: var(--el-color-danger);
    }

    .confirm-text {
      span {
        color: var(--el-color-danger);
        background-color: var(--el-color-danger-light-9);
      }
    }
  }

  .icon-svg {
    color: var(--el-color-primary);
    font-size: 42px;

    svg {
      width: 1em;
      height: 1em;
      overflow: hidden;
      vertical-align: -0.15em;
      fill: currentcolor;
    }
  }

  .confirm-text {
    margin-top: 25px;
    color: var(--el-text-color-primary);
    font-size: 14px;
    line-height: 20px;

    span {
      margin: 0 5px;
      padding: 0 4px;
      color: var(--el-color-primary);
      background-color: var(--el-color-primary-light-9);
    }
  }

  .tips-text {
    margin-top: 12px;
    color: var(--el-text-color-secondary);
    font-size: 12px;
    line-height: 22px;
    text-align: center;
  }
}
